<template>
	<view class="container">
		<view class="textBox">
			<view class="t1">小作家</view>
			<view class="t1">这一天的天气是怎样的呢</view>
		</view>
		<view class="imgBox">
			<image :src="selectedWeather"></image>
		</view>
		<view class="choiceBox">
			<view class="row" v-for="(weathers, rowIndex) in weatherGroups" :key="rowIndex">
			    <view
			        v-for="(weather, colIndex) in weathers"
			        :key="colIndex"
			        class="choice"
			        :style="{ backgroundColor: weatherMap[weather] === selectedWeather ? 'white' : 'unset' }"
			        @click="selectWeather(weather)">
			          {{ weather }}
				</view>
			</view>
		</view>
		<button class="btn" @click="toMood">今天天气是这样</button>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const weatherList = ref([
		'../../static/weather6.png',
		'../../static/weather9.png',
		'../../static/weather10.png',
		'../../static/weather5.png',
		'../../static/weather12.png',
		'../../static/weather4.png',
		'../../static/weather3.png',
		'../../static/weather1.png',
		'../../static/weather2.png',
		'../../static/weather11.png',
		'../../static/weather8.png',
		'../../static/weather7.png'
	])
	const weatherGroups = ref([
	        ['晴天', '阴天', '晴朗'],
	        ['轻雾', '多云微风', '太阳雨'],
	        ['雷雨天', '晴朗下雪', '微风'],
			['下雨','下雪','打雷']
	      ])
	const weatherMap = {
		'晴天': weatherList.value[0],
		'阴天': weatherList.value[1],
		'晴朗': weatherList.value[2],
		'轻雾': weatherList.value[3],
		'多云微风': weatherList.value[4],
		'太阳雨': weatherList.value[5],
		'雷雨天': weatherList.value[6],
		'晴朗下雪': weatherList.value[7],
		'微风': weatherList.value[8],
		'下雨': weatherList.value[9],
		'下雪': weatherList.value[10],
		'打雷': weatherList.value[11],
	};
	 
	const selectedWeather = ref(weatherList.value[0]); 
	 
	const selectWeather = (weather: string) => {
		selectedWeather.value = weatherMap[weather]; 
	};
	const toMood = () =>{
		uni.navigateTo({
			url:"/pages/mood/mood"
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color:#fff2bd;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.textBox{
			margin-top: 150rpx;
			.t1{
				font-size: 32rpx;
				// color: #85784b;
				font-style: italic;
				margin-left: 50rpx;
			}
		}
		.imgBox{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
			image{
				width: 300rpx;
				height: 300rpx;
			}
		}
		.choiceBox{
			.row{
				display: flex;
				justify-content: space-around;
				margin-bottom: 20rpx;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					// background-color: white;
					width: 200rpx;
					border-radius: 10rpx;
					height: 70rpx;
					border: #fff 2px solid;
					font-size: 25rpx;
					color: #85784b;
				}
			}
		}
		.btn{
			background-color: #fcde63;
			border-radius: 30rpx;
			width: 400rpx;
			color: white;
			font-weight: 700;
			margin-top: 200rpx;
		}
	}          
</style>
